﻿@page "/components/carousel"
<Pager Title="Carousel" Description="A slideshow component for cycling through elements—images or slides of text"
Indicates="@(new[]{"Example","With controls","With indicators","With captions","Crossfade"})">
	<Demo Title="Example">
		<Description>
			Carousels don’t automatically normalize slide dimensions. As such, 
			you may need to use additional utilities or custom styles to appropriately size content. 
			While carousels support previous/next controls and indicators, they’re not explicitly required. 
			Add and customize as you see fit.
			<br />
			
			The <code>Active</code> parameter needs to be added to one of the slides otherwise the carousel will not be visible. Also be sure to set a unique <code>Id</code> on the <code>Carousel</code> for optional controls, 
			especially if you’re using multiple carousels on a single page. 
		</Description>
		<Run>
			<Carousel>
				<CarouselItem Active ImageSrc="/img/slide1.png"/>
				<CarouselItem ImageSrc="/img/slide2.png"/>
				<CarouselItem ImageSrc="/img/slide3.png"/>
				<CarouselItem ImageSrc="/img/slide4.png"/>
			</Carousel>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Carousel>
	<CarouselItem Active ImageSrc=""/img/slide1.png""/>
	<CarouselItem ImageSrc=""/img/slide2.png""/>
	<CarouselItem ImageSrc=""/img/slide3.png""/>
	<CarouselItem ImageSrc=""/img/slide4.png""/>
</Carousel>
```
			")
		</Code>
	</Demo>
	<Demo Title="With controls">
		<Description>
			Set <code> Controls</code> to add in the previous and next controls.
		</Description>
		<Run>
			<Carousel Controls Id="control-demo">
				<CarouselItem Active ImageSrc="/img/slide1.png"/>
				<CarouselItem ImageSrc="/img/slide2.png"/>
				<CarouselItem ImageSrc="/img/slide3.png"/>
				<CarouselItem ImageSrc="/img/slide4.png"/>
			</Carousel>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Carousel Controls Id=""control-demo"">
	<CarouselItem Active ImageSrc=""/img/slide1.png""/>
	<CarouselItem ImageSrc=""/img/slide2.png""/>
	<CarouselItem ImageSrc=""/img/slide3.png""/>
	<CarouselItem ImageSrc=""/img/slide4.png""/>
</Carousel>
```
			")
		</Code>
	</Demo>
	<Demo Title="With indicators">
		<Description>
			Set <code> Indicators</code> to add the indicators to the carousel.
		</Description>
		<Run>
			<Carousel Indicators Controls Id="indicator-demo">
				<CarouselItem Active ImageSrc="/img/slide1.png"/>
				<CarouselItem ImageSrc="/img/slide2.png"/>
				<CarouselItem ImageSrc="/img/slide3.png"/>
				<CarouselItem ImageSrc="/img/slide4.png"/>
			</Carousel>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Carousel Indicators Controls Id=""indicator-demo"">
	<CarouselItem Active ImageSrc=""/img/slide1.png""/>
	<CarouselItem ImageSrc=""/img/slide2.png""/>
	<CarouselItem ImageSrc=""/img/slide3.png""/>
	<CarouselItem ImageSrc=""/img/slide4.png""/>
</Carousel>
```
			")
		</Code>
	</Demo>
	<Demo Title="With captions">
		<Description>
			Set <code>ChildContent</code> in <code>CarouselItem</code> component for caption content.
		</Description>
		<Run>
			<Carousel Indicators Controls Id="caption-demo">
				<CarouselItem Active ImageSrc="/img/slide1.png">
					<h5>First slide item</h5>
					<p>Some representative placeholder content for the first slide.</p>
				</CarouselItem>
				<CarouselItem ImageSrc="/img/slide2.png">
					<h5>Second slide item</h5>
					<p>Some representative placeholder content for the second slide.</p>
				</CarouselItem>
				<CarouselItem ImageSrc="/img/slide3.png">
					<h5>Third slide item</h5>
					<p>Some representative placeholder content for the thrid slide.</p>
				</CarouselItem>
			</Carousel>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Carousel Indicators Controls Id=""caption-demo"">
	<CarouselItem Active ImageSrc=""/img/slide1.png"">
		<h5>First slide item</h5>
		<p>Some representative placeholder content for the first slide.</p>
	</CarouselItem>
	<CarouselItem ImageSrc=""/img/slide2.png"">
		<h5>Second slide item</h5>
		<p>Some representative placeholder content for the second slide.</p>
	</CarouselItem>
	<CarouselItem ImageSrc=""/img/slide3.png"">
		<h5>Third slide item</h5>
		<p>Some representative placeholder content for the thrid slide.</p>
	</CarouselItem>
</Carousel>
```
			")
		</Code>
	</Demo>
	<Demo Title="Crossfade">
		<Description>
			Set <code> Fade</code> to animate slides with a fade transition instead of a slide.
		</Description>
		<Run>
			<Carousel Indicators Controls Fade Id="fade-demo">
				<CarouselItem Active ImageSrc="/img/slide1.png"/>
				<CarouselItem ImageSrc="/img/slide2.png"/>
				<CarouselItem ImageSrc="/img/slide3.png"/>
				<CarouselItem ImageSrc="/img/slide4.png"/>
			</Carousel>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Carousel Indicators Controls Fade Id=""fade-demo"">
	<CarouselItem Active ImageSrc=""/img/slide1.png""/>
	<CarouselItem ImageSrc=""/img/slide2.png""/>
	<CarouselItem ImageSrc=""/img/slide3.png""/>
	<CarouselItem ImageSrc=""/img/slide4.png""/>
</Carousel>
```
			")
		</Code>
	</Demo>
</Pager>